<template>
  <div class="ChannelAnalysis">
    <el-radio-group v-model="active" fill="#7b94d8">
      <el-radio-button label="1">一级渠道增长</el-radio-button>
      <el-radio-button label="2">注册渠道增长</el-radio-button>
    </el-radio-group>
    <el-card v-if="active == 1">
      <div class="searchBox">
        <!-- <h3>
          <div class="tt"></div>
          提现详情
        </h3> -->
        <el-radio-group v-model="type" size="small" fill="#7b94d8">
          <el-radio-button label="1">今日</el-radio-button>
          <el-radio-button label="2">昨日</el-radio-button>
          <el-radio-button label="3">近7日</el-radio-button>
        </el-radio-group>
        <div class="right">
          <span class="txt">渠道：</span>
          <el-select
            class="channelselect"
            v-model="channel"
            placeholder="请选择渠道"
            size="small"
          >
            <el-option
              v-for="item in channelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span class="txt" style="margin-left: 10px">时间：</span>
          <el-date-picker
            size="small"
            v-model="timeArr"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="timeOptions"
            value-format="yyyy-MM-dd"
            @change="focus"
          >
          </el-date-picker>
          <el-button class="btn" icon="el-icon-search" size="small"
            >查询搜索</el-button
          >
          <el-button icon="el-icon-paperclip" size="small">导出EXCEL</el-button>
        </div>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <template slot="empty">
          <el-empty :image-size="200"></el-empty>
        </template>
        <el-table-column prop="date" label="渠道"> </el-table-column>
        <el-table-column prop="name" label="总注册数"> </el-table-column>
        <el-table-column prop="address" label="新增注册"> </el-table-column>
        <el-table-column prop="address" label="活跃用户"> </el-table-column>
        <el-table-column prop="address" label="启动次数"> </el-table-column>
        <el-table-column prop="address" label="新增男用户"> </el-table-column>
        <el-table-column prop="address" label="新增女用户"> </el-table-column>
        <el-table-column prop="address" label="新增VIP人数"> </el-table-column>
        <el-table-column prop="address" label="新增充值金币人数">
        </el-table-column>
        <el-table-column prop="address" label="付费率"> </el-table-column>
        <el-table-column prop="address" label="ARPU"> </el-table-column>
        <el-table-column prop="address" label="ARPPU"> </el-table-column>
      </el-table>
      <pagination
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
    <el-card v-if="active == 1" style="margin-top: 20px">
      <div class="searchBox">
        <h3>
          <div class="tt"></div>
          渠道在线人数与在线时长表
        </h3>
        <!-- <el-radio-group v-model="type" size="small" fill="#7b94d8">
          <el-radio-button label="1">今日</el-radio-button>
          <el-radio-button label="2">昨日</el-radio-button>
          <el-radio-button label="3">近7日</el-radio-button>
        </el-radio-group> -->
        <div class="right">
          <!-- <span class="txt">渠道：</span>
          <el-select
            class="channelselect"
            v-model="channel"
            placeholder="请选择渠道"
            size="small"
          >
            <el-option
              v-for="item in channelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
          <span class="txt" style="margin-left: 10px">时间：</span>
          <el-date-picker
            size="small"
            v-model="timeArr1"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="timeOptions"
            value-format="yyyy-MM-dd"
            @change="focus1"
          >
          </el-date-picker>
          <el-button class="btn" icon="el-icon-search" size="small"
            >查询搜索</el-button
          >
          <el-button icon="el-icon-paperclip" size="small">导出EXCEL</el-button>
        </div>
      </div>
      <el-table
        :data="tableData1"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <template slot="empty">
          <el-empty :image-size="200"></el-empty>
        </template>
        <el-table-column
          v-for="item in tabelHead"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
        >
        </el-table-column>
      </el-table>
      <pagination
        :total="total1"
        :page.sync="page1"
        :limit.sync="pageSize1"
        @pagination="getList1"
      />
    </el-card>
    <el-card v-if="active == 2">
      <div class="searchBox">
        <!-- <h3>
          <div class="tt"></div>
          提现详情
        </h3> -->
        <el-radio-group v-model="type2" size="small" fill="#7b94d8">
          <el-radio-button label="1">今日</el-radio-button>
          <el-radio-button label="2">昨日</el-radio-button>
          <el-radio-button label="3">近7日</el-radio-button>
        </el-radio-group>
        <div class="right">
          <span class="txt">渠道：</span>
          <el-select
            class="channelselect"
            v-model="channel2"
            placeholder="请选择渠道"
            size="small"
          >
            <el-option
              v-for="item in channelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span class="txt" style="margin-left: 10px">时间：</span>
          <el-date-picker
            size="small"
            v-model="timeArr2"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="timeOptions"
            value-format="yyyy-MM-dd"
            @change="focus2"
          >
          </el-date-picker>
          <el-button class="btn" icon="el-icon-search" size="small"
            >查询搜索</el-button
          >
          <el-button icon="el-icon-paperclip" size="small">导出EXCEL</el-button>
        </div>
      </div>
      <el-table
        :data="tableData2"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
        show-summary
      >
        <template slot="empty">
          <el-empty :image-size="200"></el-empty>
        </template>
        <el-table-column prop="date" label="渠道"> </el-table-column>
        <el-table-column prop="date" label="注册渠道"> </el-table-column>
        <el-table-column prop="name" label="总注册数"> </el-table-column>
        <el-table-column prop="address" label="新增注册"> </el-table-column>
        <el-table-column prop="address" label="新增男用户"> </el-table-column>
        <el-table-column prop="address" label="新增女用户"> </el-table-column>
        <el-table-column prop="address" label="新增VIP人数"> </el-table-column>
        <el-table-column prop="address" label="新增充值金币人数">
        </el-table-column>
        <el-table-column prop="address" label="留存VIP充值人数">
        </el-table-column>
        <el-table-column prop="address" label="留存金币充值人数">
        </el-table-column>
        <el-table-column prop="address" label="付费率"> </el-table-column>
        <el-table-column prop="address" label="ARPU"> </el-table-column>
        <el-table-column prop="address" label="ARPPU"> </el-table-column>
      </el-table>
      <pagination
        :total="total2"
        :page.sync="page2"
        :limit.sync="pageSize2"
        @pagination="getList2"
      />
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
export default {
  components: { Pagination },
  data() {
    return {
      active: "1",
      type: "1",
      channel: "",
      timeArr: [],
      startTime: "",
      endTime: "",
      tableData: [],
      total: 0,
      page: 1,
      pageSize: 10,
      //在线人数与在线时长
      timeArr1: [],
      startTime1: "",
      endTime1: "",
      tableData1: [],
      tabelHead: [{ prop: "test", label: "test" }],
      total1: 0,
      page1: 1,
      pageSize1: 10,
      //注册渠道增长
      type2: "1",
      channel2: "",
      timeArr2: [],
      startTime2: "",
      endTime2: "",
      tableData2: [],
      total2: 0,
      page2: 1,
      pageSize2: 10,
      timeOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      channelOptions: [],
    };
  },
  methods: {
    focus() {
      if (!this.timeArr) {
        this.timeArr = [];
      }
      this.startTime = this.timeArrA[0];
      this.endTime = this.timeArrA[1];
    },
    focus1() {
      if (!this.timeArr1) {
        this.timeArr1 = [];
      }
      this.startTime1 = this.timeArrA1[0];
      this.endTime1 = this.timeArrA1[1];
    },
    focus2() {
      if (!this.timeArr2) {
        this.timeArr2 = [];
      }
      this.startTime2 = this.timeArrA2[0];
      this.endTime2 = this.timeArrA2[1];
    },
    getList() {},
    getList1() {},
    getList2() {},
  },
  created() {},
  watch: {
    type: {
      handler(newName, oldName) {
        if (newName == 1) {
          var myDate = new Date();
          var time = myDate.toLocaleDateString().split("/").join("-");
          this.timeArr = [time, time];
          this.startTime = time;
          this.endTime = time;
        } else if (newName == 2) {
          var myDate = new Date();
          var time = myDate.toLocaleDateString().split("/").join("-");
          var newtimems = new Date().getTime() - 24 * 60 * 60 * 1000;
          var myDate1 = new Date(newtimems);
          var time1 = myDate1.toLocaleDateString().split("/").join("-");
          this.timeArr = [time1, time];
          this.startTime = time1;
          this.endTime = time;
        } else if (newName == 3) {
          var myDate = new Date();
          var time = myDate.toLocaleDateString().split("/").join("-");
          var newtimems = new Date().getTime() - 24 * 60 * 60 * 1000 * 6;
          var myDate1 = new Date(newtimems);
          var time1 = myDate1.toLocaleDateString().split("/").join("-");
          this.timeArr = [time1, time];
          this.startTime = time1;
          this.endTime = time;
        }
      },
      immediate: true,
    },
    type2: {
      handler(newName, oldName) {
        if (newName == 1) {
          var myDate = new Date();
          var time = myDate.toLocaleDateString().split("/").join("-");
          this.timeArr2 = [time, time];
          this.startTime2 = time;
          this.endTime2 = time;
        } else if (newName == 2) {
          var myDate = new Date();
          var time = myDate.toLocaleDateString().split("/").join("-");
          var newtimems = new Date().getTime() - 24 * 60 * 60 * 1000;
          var myDate1 = new Date(newtimems);
          var time1 = myDate1.toLocaleDateString().split("/").join("-");
          this.timeArr2 = [time1, time];
          this.startTime2 = time1;
          this.endTime2 = time;
        } else if (newName == 3) {
          var myDate = new Date();
          var time = myDate.toLocaleDateString().split("/").join("-");
          var newtimems = new Date().getTime() - 24 * 60 * 60 * 1000 * 6;
          var myDate1 = new Date(newtimems);
          var time1 = myDate1.toLocaleDateString().split("/").join("-");
          this.timeArr2 = [time1, time];
          this.startTime2 = time1;
          this.endTime2 = time;
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
.ChannelAnalysis {
  padding: 20px;
  .searchBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3 {
      margin: 0;
      display: flex;
      align-items: center;
      .tt {
        display: inline-block;
        width: 5px;
        height: 18px;
        margin-right: 5px;
        background-color: #7b94d8;
      }
    }
    .right {
      display: flex;
      align-items: center;
    }
  }
}
</style>